<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src='Static/libs/jquery.js'></script>
    <!-- 引入 ECharts 文件 -->
    <script src='Static/libs/echarts/echarts.js'></script>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        var globaldata = "";
        //采样点数据,value是采样点数量
        var yuanshiData = [
            {name: '成都市', value: undefined},
            {name: '自贡市', value: undefined},
            {name: '攀枝花市', value: undefined},
            {name: '泸州市', value: undefined},
            {name: '德阳市', value: undefined},
            {name: '绵阳市', value: undefined},
            {name: '广元市', value: undefined},
            {name: '遂宁市', value: undefined},
            {name: '内江市', value: undefined},
            {name: '乐山市', value: undefined},
            {name: '南充市', value: undefined},
            {name: '眉山市', value: undefined},
            {name: '宜宾市', value: undefined},
            {name: '广安市', value: undefined},
            {name: '达州市', value: undefined},
            {name: '雅安市', value: undefined},
            {name: '巴中市', value: undefined},
            {name: '资阳市', value: undefined},
            {name: '阿坝藏族羌族自治州', value: undefined},
            {name: '甘孜藏族自治州', value: undefined},
            {name: '凉山彝族自治州', value: undefined}
        ];
        //散点坐标
        var geoCoordMap = {};

        function AjaxSubmit() {
            //获取全局数据
            $.post({
                url: '/getGlobalData',
                data: {'originData': JSON.stringify(yuanshiData)},
                dataType: "json",//返回的数据类型格式
                async: false,
                success: function (data) {
                    globaldata = data
                }
            });
            //获取散点坐标
            $.post({
                url: '/getAllPoint',
                async: false,
                success: function (data) {
                    geoCoordMap = data
                }
            });
        }
    </script>

    <title>GE SC</title>
</head>
<body>
<a href="/toupload">进入文件上传页面</a><br>
<ul id="details"></ul>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="cityMap" style="width:1000px;height:800px;border:1px solid #ffffff;margin: 40px auto;"></div>


<!-- 弹出框 -->
<div id="box">
    <span id="box-title"></span>
</div>

<script src="Static/layui/layui.js" charset="utf-8"></script>

<script type="text/javascript">
    //获取各个城市采样点数量
    AjaxSubmit();
    //初始化采样点总数
    var globalscatter = undefined;

    //此处globaldata是一个数组，保存着一个个的json对象
    for (var val in globaldata) {
        for (var i = 0; i < yuanshiData.length; i++) {
            if (val == yuanshiData[i].name) {
                yuanshiData[i].value = globaldata[val];
            }
        }
        if (val == "scatter") {
            globalscatter = globaldata[val];
        }
    }

    //散点数据
    var yuanshisanData = [];
    for (var i = 1; i <= globalscatter; i++) {
        var data = {};
        var sbegin = "采样点";
        data.name = sbegin.concat(i.toString());//key
        data.value = geoCoordMap[data.name];//value
        yuanshisanData.push(data);
    }


    let myCharts = echarts.init(document.getElementById('cityMap'));
    $.get('Static/libs/echarts/sichuan.json', function (data) {
        echarts.registerMap('sichuan', data, {});
        var mapData = yuanshiData;


        var sanData = yuanshisanData;
        console.log(sanData);


        // var geoCoordMap = { // 散点坐标
        //     '采样点1': [104.1669167, 30.47363889],
        //     '采样点2': [104.500556, 31.703722],
        //     '采样点3': [102.760639, 30.074444],
        //     '采样点4': [107.019389, 30.798972],
        //     '采样点5': [105.691917, 30.726194],
        //     '采样点6': [106.697333, 30.605806],
        // };


        var convertData = function (data) { // 处理数据函数
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: "经度&纬度",
                        value: geoCoord
                    });
                }
            }
            return res;
        };
        let option = { // echarts 配置
            tooltip: {
                trigger: 'item'
            },
            geo: { // 地图配置
                show: true,
                map: 'sichuan',
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                roam: false,
                itemStyle: {
                    normal: {
                        areaColor: '#85c673',
                        borderColor: '#85c673',
                    },
                    emphasis: {
                        areaColor: '#FFDF33',
                        textStyle: {
                            color: 'rgba(0, 255, 255, 1.8)'
                        }
                    }
                },
                //在 itemStyle 中有 normal 和 emphasis 两个选项，normal 选项显示的是正常展示下的样式，emphasis 是当鼠标 hover 时候的高亮样式。
                itemStyle: {
                    normal: {
                        areaColor: '#ffffff',
                        borderColor: '#000000'//城市边界线颜色
                    },
                    emphasis: {
                        areaColor: '#98f349',//鼠标悬停后的颜色
                        textStyle: {
                            color: 'rgba(0, 255, 255, 1.8)'
                        }
                    }
                },
                zoom: 1.25
            },
            visualMap: {
                show: false,
                min: 0,
                max: 8,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['gray', 'lightskyblue', 'yellow', 'orangered']
                }
            },
            series: [{ // 地图配置
                name: '--地市采样点数量汇总--',
                type: 'map',
                mapType: 'sichuan', // 自定义扩展图表类型
                geoIndex: 0,
                aspectScale: 0.75, // 长宽比
                //在 itemStyle 中有 normal 和 emphasis 两个选项，normal 选项显示的是正常展示下的样式，emphasis 是当鼠标 hover 时候的高亮样式。
                itemStyle: {
                    normal: {
                        label: {show: true},
                        areaColor: '#ffffff',
                        borderColor: '#ffffff',
                        color: '#ffffff'

                    },
                    emphasis: {
                        label: {show: true},
                        areaColor: 'rgb(207,235,101)',
                        color: 'rgb(207,235,101)'
                    }
                },
                data: mapData
            },
                { // 散点配置
                    name: '--采样点具体信息--',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    data: convertData(sanData),
                    symbolSize: function (val) {
                        return 5;//散点半径
                    },
                    showEffectOn: 'emphasis',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            show: true,
                            areaColor: '#ffffff',//散点文字颜色
                            color: '#ffffff'//散点文字颜色
                        }
                    },
                    //设置样式
                    itemStyle: {
                        normal: {
                            color: '#ffffff',
                            borderColor: '#ffffff',
                        },
                        emphasis: {
                            show: true,
                            color: '#ffffff'
                        }
                    }
                }]
        };
        myCharts.setOption(option);
    });


</script>


<!--<script type="text/javascript">

    myCharts.on('click', function (params) {
        var city = params.name;
        console.log(city);
    });

</script>-->
<script type="text/javascript">
    //隐藏无序列表，否则一旦查询详细信息会直接显示在主页面上
    $("#details").hide();

    //拼接HTML字符串放入无序列表中
    function printData(data,longitude,latitude) {
        var html = "";
        html += '<li>经度：' + longitude + ' 纬度：' + latitude + '</li>';
        html += '<li>查询到' + data.length + '个样品</li>';
        for (var i = 0; i < data.length; i++) {
            html += '<li>'
            //遍历JSON对象数组
            for (var key in data[i]) {
                //键值对拼接
                html += key + '：' + data[i][key] + '<br>';
            }
            html += '</li>'
        }
        $("#details").html(html);
    }

    myCharts.on('click', function (params) {
        console.log("name=" + params.name);
        console.log("value=" + params.value);
        // 点击点出现经纬度
        if (Array.isArray(params.value)) {
            let longitude = params.value[0];
            let latitude = params.value[1];
            // 通过经纬度获取该点的所有值
            $.post({
                url: '/getDataByCoordinate',
                data: {"longitude": longitude, "latitude": latitude},
                // dataType: "json",//返回的数据类型格式
                success: function (data) {
                    printData(data,longitude,latitude);
                }
            });
        } else {
            var html = "<li>" + params.name + "有" + params.value + "个数据</li>";
            $("#details").html(html);
        }
    });

</script>


<script type="text/javascript">

    layui.use('layer', function () { //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

        //触发事件
        var active = {
            setTop: function () {
                var that = this;
                //多窗口模式，层叠置顶
                layer.open({
                    type: 1
                    , title: '具体数据'
                    , area: ['400px', '300px']
                    , shade: 0
                    , maxmin: true
                    , offset: 'auto'
                    , content: $("#details")
                    , btn: ['关闭'] //只是为了演示

                    , btn1: function (index) {
                        layer.close(index);
                        // layer.closeAll();
                    }

                    , zIndex: layer.zIndex //重点1
                    , success: function (layero) {
                        layer.setTop(layero); //重点2
                    }
                });
            }

        };

        myCharts.on('click', function () {
            console.log(this);

            var othis = $(this), method = 'setTop';
            active[method] ? active[method].call(this, othis) : '';
        });

    });
</script>


</body>
</html>